<template>
  <div class="card content-box">
    <span class="text"> 引导页 🍓🍇🍈🍉</span>
    <el-alert
      title="引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于 driver.js."
      type="warning"
      :closable="false"
    />
    <div id="Geeker"><el-button type="primary" @click.prevent.stop="guide">打开引导页 🤹‍♂️</el-button></div>
  </div>
</template>

<script setup lang="ts" name="guide">
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";

const guide = () => {
  const driver: Driver = new Driver({
    allowClose: false,
    doneBtnText: "结束",
    closeBtnText: "关闭",
    nextBtnText: "下一步",
    prevBtnText: "上一步"
  });
  driver.defineSteps(steps);
  driver.start();
};

const steps = [
  {
    element: "#collapseIcon",
    popover: {
      title: "Collapse Icon",
      description: "Open && Close sidebar",
      position: "right"
    }
  },
  {
    element: "#breadcrumb",
    popover: {
      title: "Breadcrumb",
      description: "Indicate the current page location",
      position: "right"
    }
  },
  {
    element: "#assemblySize",
    popover: {
      title: "Switch Assembly Size",
      description: "Switch the system size",
      position: "left"
    }
  },
  {
    element: "#language",
    popover: {
      title: "Switch Language",
      description: "Switch the system language",
      position: "left"
    }
  },
  {
    element: "#searchMenu",
    popover: {
      title: "Page Search",
      description: "Page search, quick navigation",
      position: "left"
    }
  },
  {
    element: "#themeSetting",
    popover: {
      title: "Setting theme",
      description: "Customize settings theme",
      position: "left"
    }
  },
  {
    element: "#message",
    popover: {
      title: "Message Notification",
      description: "Can receive company information",
      position: "left"
    }
  },
  {
    element: "#fullscreen",
    popover: {
      title: "Full Screen",
      description: "Full Screen, Exit The Full Screen Page",
      position: "left"
    }
  }
];
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
